<!-- <template>
  <div class="main">

    <img class="mainImg" src="../assets/image/landingPage.jpg"></img>

    <div class="content">
      <img class="contentImg" src="../assets/image/landingWindow.png">
      <div class="content_div" v-if="type">
        <div class="spin" v-if="loading">
          <Spin fix></Spin>
        </div>
        <img class="content_div_img" @click="change" src="../assets/image/qrcode.png">
        <div class="title">验证码登录</div>
        <div class="content_input">
          <input placeholder="账号或手机号" v-model="account">
        </div>
        <div class="content_input" style="display: flex;justify-content: space-between;align-items: center;">
          <input class="content_input_yzm" placeholder="请输入验证码" v-model="code">
          <div class="content_input_button" v-if="sendStatus == 1" @click="sendYZM">发送验证码</div>
          <div class="content_input_button2" v-if="sendStatus == 2">发送中</div>
          <div class="content_input_button2" v-if="sendStatus == 3">{{sendNum}}s</div>
        </div>
        <div :class="disabled?'content_button content_button1':'content_button content_button2'" @click="submit">登录</div>
        <div class="content_bottom">
          <div class="content_bottom_button" @click="free">免费申请</div>
          <div class="content_bottom_p" @click="change">微信扫码登录</div>
        </div>
      </div>

      <div class="content_div" v-else>
        <div class="spin" v-if="loading">
          <Spin fix></Spin>
        </div>
        <img class="content_div_img" @click="change" src="../assets/image/computer.png">
        <div class="title">微信二维码登录</div>
        <div class="qrcode">
          <canvas class="qrcodeCanvas" id="QRCode"></canvas>
          <div class="time" v-if="time">
            <p class="time_p">二维码已过期</p>
            <div class="time_button" @click="getScanCode">点击刷新</div>
          </div>
          <div class="ok" v-if="!ok">
            <img src="../assets/image/success.png">
          </div>
        </div>
        <div class="qrcode_p" v-if="ok">请使用微信扫描二维码登陆</div>
        <div class="qrcode_p" v-else>扫码成功，即将跳转</div>
        <div class="content_bottom2">
          <div class="content_bottom_button" @click="free">免费申请</div>
          <div class="content_bottom_p" @click="change">验证码登录</div>
        </div>
      </div>
    </div>

    <div class="bottom_title">
      <img src="../assets/image/feizhu.png">
      <p>文旅绿码后台管理系统飞猪版</p>
    </div>

  </div>
</template>

<script>
  import QRCode from "qrcode"
  import {md5} from '../config/md5.js'
  export default {
    data() {
      return {
        account:'',
        loading:false,
        disabled:true,
        type: false,
        pswdType: false,
        footerHide: true,
        // websocket
        websocket: null,
        time: false,
        setTime: null,
        clientId: '',
        ok:true,
        // 验证码
        sendStatus:1,
        sendNum: 60,
        code: '',
        sendSetTime: null,




      }
    },
    created(){
      if(localStorage.getItem('token') == '' || localStorage.getItem('token') == undefined){
        this.getScanCode()
      }else{
        this.$router.push({name:'场馆信息'})
      }
    },
    mounted(){
      this.enter()
    },
    beforeDestroy(){
      clearInterval(this.setTime)
    },
    destroyed(){
　　　this.websocketclose()               
　　},
    watch:{
      'account':function(){
        this.disabledStatus()
      },
      // 'password':function(){
      //   this.disabledStatus()
      // },
      'code':function(){
        this.disabledStatus()
      }
    },
    methods:{

      change(){
        if(this.type){
          this.getScanCode()
        }else{
          this.websocketclose()
          clearInterval(this.setTime)
          this.ok = true
          this.time = false
        }
        this.type = ! this.type
      },

      getScanCode(){
        this.$http('/stage/user/getScanCode',{

        },'get',(res)=>{
          if(res.data.code == 200){
            var msg = document.getElementById("QRCode")
            QRCode.toCanvas(msg, res.data.data, function(error) {})
            this.clientId = res.data.data.split('clientId=')[1]
            this.initWebSocket()
            this.time = false
            clearInterval(this.setTime)
            this.timeCheck(0)
          }else{
            this.$Message.error('获取二维码失败')
          }
        })
      },
      timeCheck(data){
        let that = this
        this.setTime = setInterval(function(){
          data ++
          if(data == 60){
            that.time = true
            that.websocket.close()
            clearInterval(that.setTime)
          }
        },1000)
      },
      initWebSocket(){
        // const WS_URL = "ws://" + process.env.API_ROOT.split('//')[1] + "/websocket/" + this.clientId
        const WS_URL = "wss://" + process.env.API_ROOT.split('//')[1] + "/websocket/" + this.clientId
        this.websocket = new WebSocket(WS_URL)
        this.websocket.onopen = this.websocketonopen
        this.websocket.onerror = this.websocketonerror
        this.websocket.onmessage = this.websocketonmessage
        this.websocket.onclose = this.websocketclose
      },
      /// 连接建立之后执行send方法发送数据
      websocketonopen() {
        this.websocket.send('博物文化')
      },
      //连接建立失败重连
      websocketonerror(e) {
        this.initWebSocket()
      },
      // 数据接受
      websocketonmessage(e){
        if(e.data != '建立连接'){

          
          let data = JSON.parse(e.data)
          this.websocket.close()
          clearInterval(this.setTime)
          this.ok = false
          this.$Message.success('欢迎登录，即将跳转')
          localStorage.clear()
          let that = this

          if(data.adminType == 1){
            this.$store.state.superAdmin = true
            localStorage.setItem('superAdmin', true)
          }else{
            this.$store.state.superAdmin = false
            localStorage.setItem('superAdmin', false)
          }

          this.$store.state.token = data.token
          localStorage.setItem('token', data.token)

          if(data.adminType == 1){
            this.$store.state.museumId = ''
            localStorage.setItem('museumId', '')
            this.$store.state.museums = []
            localStorage.setItem('museums', JSON.stringify([]))
            setTimeout(function(){
              that.$router.push({name:'场馆信息'})
            },1000)
          }
          else if(data.adminType == 2){

            this.$http('/stage/museum/getAppMuseumDropDown',{},'post',(Res)=>{
              if(Res.data.code == 200){
                this.$store.state.museums = Res.data.data
                localStorage.setItem('museums', JSON.stringify(Res.data.data))
                this.$store.state.museumId = Res.data.data[0].id
                localStorage.setItem('museumId', Res.data.data[0].id)
                this.$store.state.museumName = Res.data.data[0].name
                localStorage.setItem('museumName', Res.data.data[0].name)
                setTimeout(function(){
                  that.$router.push({name:'场馆信息'})
                },1000)
              }else{
                this.$Message.error(Res.data.msg)
              }
            })

          }
          else{
            this.$store.state.museums = data.museums
            localStorage.setItem('museums', JSON.stringify(data.museums))
            this.$store.state.museumId = data.museums[0].id
            localStorage.setItem('museumId', data.museums[0].id)
            this.$store.state.museumName = data.museums[0].name
            localStorage.setItem('museumName', data.museums[0].name)
            setTimeout(function(){
              that.$router.push({name:'场馆信息'})
            },1000)
          }


        }
      }, 
      // 关闭
      websocketclose(e){ 
        this.websocket.close()
      },


      submit(){
        if (this.account.trim().length == 0) {
          this.$Message.error('账号或手机号不能为空')
          return false
        }
        this.login()
      },
      enter(){
        document.onkeydown = (event) => {
          let e = event || window.event
          if (e.keyCode === 13 && this.$route.name === 'signin') {
            this.submit()
          }
        }
      },
      disabledStatus(){
        if(this.account.trim().length != 0 && this.code.trim().length != 0){
          this.disabled = false
        }else{
          this.disabled = true
        }
      },
      login(){
        this.loading = true
        this.$http('/stage/user/login',{
          // password: md5(this.password),
          username: this.account,
          code: this.code
        },'post',(res)=>{
          if(res.data.code == 200){


            let data = res.data.data
            localStorage.clear()

            if(data.adminType == 1){
              this.$store.state.superAdmin = true
              localStorage.setItem('superAdmin', true)
            }else{
              this.$store.state.superAdmin = false
              localStorage.setItem('superAdmin', false)
            }

            this.$store.state.token = data.token
            localStorage.setItem('token', data.token)

            let that = this
            if(data.adminType == 1){
              this.$store.state.museumId = ''
              localStorage.setItem('museumId', '')
              this.$store.state.museums = []
              localStorage.setItem('museums', JSON.stringify([]))
              this.$router.push({name:'场馆信息'})
            }
            else if(data.adminType == 2){

              this.$http('/stage/museum/getAppMuseumDropDown',{},'post',(Res)=>{
                if(Res.data.code == 200){
                  this.$store.state.museums = Res.data.data
                  localStorage.setItem('museums', JSON.stringify(Res.data.data))
                  this.$store.state.museumId = Res.data.data[0].id
                  localStorage.setItem('museumId', Res.data.data[0].id)
                  this.$store.state.museumName = Res.data.data[0].name
                  localStorage.setItem('museumName', Res.data.data[0].name)
                  this.$router.push({name:'场馆信息'})
                }else{
                  this.$Message.error(Res.data.msg)
                }
              })

            }
            else{
              this.$store.state.museums = data.museums
              localStorage.setItem('museums', JSON.stringify(data.museums))
              this.$store.state.museumId = data.museums[0].id
              localStorage.setItem('museumId', data.museums[0].id)
              this.$store.state.museumName = data.museums[0].name
              localStorage.setItem('museumName', data.museums[0].name)
              this.$router.push({name:'场馆信息'})
            }


          }else{
            this.loading = false
            this.$Message.error(res.data.msg)
          }
        })
      },
      sendYZM(){
        if(this.account == ''){
          this.$Message.error('请先输入账号或手机号')
          return false
        }
        this.sendStatus = 2
        this.$http('/stage/user/getLoginCaptcha',{
          account: this.account
        },'get',(res)=>{
          if(res.data.code == 200){
            this.sendStatus = 3
            this.$Modal.info({
              title: '发送成功',
              content: '验证码已发送到' + res.data.data + ',请注意查收'
            })
            let that = this
            this.sendSetTime = setInterval(function(){
              if(that.sendNum == 0){
                that.sendNum = 60
                that.sendStatus = 1
                clearInterval(that.sendSetTime)
              }else{
                that.sendNum --
              }
            },1000)
          }else{
            this.sendStatus = 1
            this.$Message.error(res.data.msg)
          }
        })
      },
      free(){
        this.$router.push({name:'免费申请'})
      },

    }
  }
</script>



<style scoped>
  .main{position: absolute;width:100%;height:100%;}
  .spin{position: absolute;width:100%;height:100%;z-index: 100;top:0;background-color: rgba(255,255,255,0);}
  .mainImg{position: absolute;width:100%;height:100%;}
  .content{width:271.6px;height:400px;position: absolute;z-index: 2;left:50%;top:50%;margin-left:-135.8px;margin-top:-200px;}
  .contentImg{width:100%;height:100%;}
  .content_div{width:237px;height:297px;position: absolute;top:84px;left:17px;}
  .title{width:207px;height:50.6px;margin-left:15px;border-bottom:1px solid #e6e6e6;display: flex;align-items: center;font-size: 12px;color:#000000;}
  .content_div_img{width:30px;height:30px;position: absolute;right:5px;top:5px;cursor: pointer;}
  .content_input{width:207px;height:34px;margin-left:15px;margin-top:20px;background-color: #f0f0f0;border-radius: 2px;}
  .content_input_pswd input{width:175px;}
  .content_input_button{width:90px;height:34px;background-color: #17b371;font-size: 12px;color:white;border-radius: 2px;cursor: pointer;text-align: center;line-height: 34px;}
  .content_input_button2{width:90px;height:34px;background-color: silver;font-size: 12px;color:white;border-radius: 2px;cursor: pointer;text-align: center;line-height: 34px;}
  .content_input_button:hover{opacity: 0.8}
  .content_input_yzm{width:140px;}
  .content_input_pswd_icon{position: absolute;right:23px;line-height: 27px;cursor: pointer;}
  .content_input_pswd_icon:hover{opacity: 0.8}
  input{width:100%;height:100%;outline: none;border:none;background-color: #f0f0f0;border-radius: 2px;text-indent: 10px;color:#000000;font-size: 11px;letter-spacing: 1px}
  input::placeholder {font-size: 11px;color:#999999;}
  .content_button{width:207px;height:27px;margin-left:15px;margin-top:20px;border-radius: 2px;display: flex;justify-content: center;align-items: center;font-size: 12px;cursor: pointer;z-index: 10}
  .content_button1{background-color:#f0f0f0;color:#999999;}
  .content_button2{background-color: #17b371;color:white;}
  .content_bottom{width:100%;height:50px;position: absolute;bottom:20px;display: flex;justify-content:center;align-items: center;}
  .content_bottom2{width:100%;height:70px;position: absolute;bottom:0;display: flex;justify-content:center;align-items: center;}
  .content_bottom_button{width:70px;height:22px;background-color: #17b371;font-size: 11px;color:#ffffff;border-radius: 11px;text-align: center;line-height: 22px;cursor: pointer;}
  .content_bottom_p{font-size: 11px;color:#17b371;margin-left:30px;cursor: pointer;}
  .content_bottom_p:hover{opacity: 0.9}
  .content_bottom_button:hover{opacity: 0.9}
  .content_div_img:hover{opacity: 0.9}
  .content_button2:hover{opacity: 0.9}
  .qrcode{width:150px;height:150px;margin-left:43.5px;margin-top:10px;background-color: white;position: relative;}
  .qrcode_p{width:100%;text-align: center;font-size: 9px;color:#999999;line-height: 10px}
  .qrcodeCanvas{width:150px !important;height:150px !important;}
  .time{position: absolute;width:100%;height:100%;background-color: rgba(255,255,255,0.8);z-index: 100;top:0;}
  .time_p{width:100%;text-align: center;font-size: 14px;margin-top:44px;color:black}
  .time_button{width:80px;height:26px;background-color: #17b371;text-align: center;line-height: 26px;color:white;font-size: 10px;border: 1px #17b371 solid;margin:20px 0 0 35px;cursor: pointer;}
  .time_button:hover{opacity: 0.8}
  .ok{width:40px;height:40px;position: absolute;top:50%;left:50%;margin-left:-20px;margin-top:-20px;background-color: white;border-radius: 50%}
  .ok img{width:100%;height:100%;opacity: 0.6}
  .bottom_title{width:100%;height:15%;position: absolute;bottom:0;}
  .bottom_title img{width:100px;height:50px;position: absolute;left:50%;margin-left:-50px;}
  .bottom_title p{width:100%;text-align: center;position: absolute;top:60px;color:white;font-size: 12px;opacity: 0.8}
</style> -->
